<template>
  <div v-if="!eventlist.length"></div>
  <div v-else ref="refEventSwiper" class="event-swiper-wrap">
    <img src="@/assets/home/event-title.png" class="title" alt="">
    <div class="map">
      <GdMap ref="gdMap" :identifier="'mapContainer'"></GdMap>
    </div>
    <van-swipe :autoplay="10000" indicator-color="#FD6260" @change="eventChange">
      <van-swipe-item v-for="(item, index) in eventlist" :key="index" @click="onClick(item)">
        <div class="event-item">
          <div class="image">
          </div>
          <p class="ellipsis">{{item.eventName}}</p>
          <p class="time">事发时间 {{item.eventTime}}</p>
        </div>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import GdMap from "@/components/GdMap/gd-map.vue"
import eventIcon from "@/assets/icon/icon-event.png"
defineOptions({
  name: 'EventSwiper'
})

interface IProp {
  list: RecordType[];
}

const props = defineProps<IProp>();
const emit = defineEmits(['switch'])

const eventlist = ref<RecordType[]>([])
watch(
  () => props.list,
  (val: RecordType[]) => {
    eventlist.value = val.splice(0,5);
    nextTick(()=>{
      initMap();
    })
  }
);

const router = useRouter()
const gdMap = ref<HTMLElement | null>(null)

//swipe切换时地图重新打点
const eventChange = (index) => {
  gdMap.value.clearMap();
  let markers = [];
  let item = eventlist.value[index]
  markers.push({
    lon: item.ycoordinate,
    lat: item.xcoordinate,
    icon: eventIcon,
    name: item.eventName
  })
  gdMap.value.addMarkers(markers);
  gdMap.value.setCenter([item.ycoordinate, item.xcoordinate], 11.63)
}

const initMap = () => {
  if(gdMap.value)
  gdMap.value.initMap((layers) => {
    eventChange(0)
  });
}
const onClick = (item) =>{
  router.push({
    name: 'event',
    query: {
      id: item.id
    }
  })
}

</script>

<style lang="less" scoped>
.event-swiper-wrap {
  background: url("@/assets/home/event-bg.png") no-repeat center center;
  height: 160px;
  background-size: 100% 100%;
  margin: 0 6px 14px;
  padding: 20px 22px 16px;
  position: relative;
  .title{
    width: 116px;
    margin-left: 3px;
    position: absolute;
    top: 20px;
  }
  .van-swipe{
    padding: 30px 0 0;
    :deep(.van-swipe__indicators){
      top: 5px;
      left: 41%;
      bottom: auto;
      transform: translate(0);
      .van-swipe__indicator{
        width: 3px;
        height: 3px;
        opacity: 1;
        background: #FFFFFF;
        border: 1px solid #FD6260;
        margin-right: 3px;
      }
    }
  }
  .event-item{
    color: #212121;
    font-size: 15px;
    font-weight: 900;
    .time{
      color: #21212199;
      font-size: 12px;
      background: url("@/assets/icon/icon-time.png") no-repeat left center;
      background-size: 12px 12px;
      padding-left: 15px;
      margin-top: 8px;
    }
  }
  .map,.image{
    width: 318px;
    height: 76px;
    margin-bottom: 10px;
  }
  .map{
    position: absolute;
    top: 48px;
    z-index: 1;
    :deep(.amap-icon){
      width: 29.5px!important;
      height: 33px!important;
      img{
        width: 100%!important;
        height: 100%!important;
      }
    }
  }
}
</style>
